<template>
  <div>
     <a-drawer
      :title="title"
      placement="right"
      :closable="false"
      :width="width"
      :visible="visible"
      @close="onClose"
    >
      <div>产品ID:</div>
      <a-collapse v-model="activeKey">
      <a-collapse-panel :key="item.key" :header="item.title" v-for="item in collapseList">
          <detail-list title="">
            <detail-list-item term="抽检名称">{{item.name}}</detail-list-item>
            <detail-list-item term="抽检人">{{item.sonrean}}</detail-list-item>
            <detail-list-item term="抽检时间">{{item.time}}</detail-list-item>
          </detail-list>
          <div>
              <detail-list title="" v-for="(ifont,idx) in item.children" :key="idx+'fd'">
                <detail-list-item term="抽检项目">{{ifont.label}}</detail-list-item>
                <detail-list-item term="抽检结果">{{ifont.result}}</detail-list-item>
            </detail-list>
          </div>
      </a-collapse-panel>
    </a-collapse>
    </a-drawer>
  </div>
</template>

<script>
import DetailList from '@/components/tool/DetailList'
const DetailListItem = DetailList.Item
export default {
  name:'maintenanceRecord',
  components:{DetailList,DetailListItem},
  data(){
      return{
        title:'抽检记录',
        visible:false,
        width:1000,
        activeKey:'1',
        collapseList:[
            {title:'抽检任务1',key:'1',name:'整机抽检',sonrean:'张思',time:'2020-05-30',
            children:[
                {label:'外观',result:'合格'},
                {label:'奢侈',result:'合格'},
                {label:'外观',result:'合格'},
            ]
            },
            {title:'抽检任务3',key:'3',name:'整机抽检',sonrean:'张思',time:'2020-05-30',
            children:[
                {label:'外观',result:'合格'},
                {label:'壳厚度',result:'不合格'},
            ]},
            {title:'抽检任务4',key:'4',name:'整机抽检',sonrean:'张思',time:'2020-05-30',},
            {title:'抽检任务2',key:'2',name:'整机抽检',sonrean:'张思',time:'2020-05-30',},
        ],
      }
  },
  methods:{
      open(val){
          this.visible=true
      },
      onClose(){this.visible=false}
  },
}
</script>

<style lang="less" scoped>

</style>